﻿<html>
    <head>
        <title>Home Page——Project OTS</title>
        <link rel="stylesheet" href="/style.css" type="text/css" />
        <script src="/jquery-3.3.1.js" type="text/javascript"></script>
        <style>
            @keyframes time{
                from{width:{{width}}px;}
                to{width:0px;}
            }
        </style>
    </head>
    <body class="body"><div id="cover" style="background-color: black;opacity:0.8;position:fixed;height: 100%;width: 100%;z-index:9;display:none;"></div><div id="info" class="infobox" style="min-height:210px;z-index:19;text-align:center;display:none;">
        <div style="text-align: center;font-family: 'Microsoft Yahei UI';">试卷提交中，请稍候……</div><img src="/load.gif" width="300px;"><div>评分队列剩余  <span id="waitinline" style="font-weight: 1000;font-size: 36px;"> ？ </span>  份</div></div>
        <div class="cbl" >
            <div class="cblcenter" >
                <div class="sign"> Project OTS</div>
                <div id="userstatus" style="display: {{statusvi}};">
                    <div style="margin-left:10px;">{{greeting}}，{{username}}！</div>
                    <div class="inputclass">
                        <form action="/signout" method="post" style="width:110px;float:right;margin-left:5px;">
                            <button class="inputbutton" type="submit">登出</button>
                        </form>
                        <form action="/changepwd" method="post" style="width:110px;margin-right:5px;">
                            <button class="inputbutton" type="submit">修改密码</button>
                        </form>
                        
                    </div>
                </div>
                <div id="userlogin" style="display: {{loginvi}};">
                    <form action="/signin" method="post" style="text-align: left;">
                        <legend style="text-align: center;">用户登录</legend>
                        <div style="color:red;font-size: 18px;text-align: center;">{{error}}</div>
                        <div class="inputclass">
                            用户名
                            <input class="inputbox" name="username" placeholder="Username">
                        </div>
                        <div class="inputclass">
                            密码
                            <input  class="inputbox" name="password" placeholder="Password" type="password">
                        </div>
                        <div class="inputclass">
                            <button class="inputbutton" type="submit">登录</button>
                        </div>
                    </form>
                </div>
                <div class="copyright">©2019 CrystalRays</div>
            </div>
        </div>
        <div class="content">
            <a href="/" id="back" >&lt;</a>
            <div class="tittlebar">
                <span class="tittle">正在进行测试:{{testname}}</span>
                <div class="line"></div>
            </div>
            <form id="o(*￣▽￣*)ブ" action="/calc/{{testname}}" method="POST">
                {% for i in question_list %}
                <div class="questionbox">
                    <div style="float:left;">{{ i[0] }}</div>
                    <div style="position: relative;margin-left:50px;font-size: 18px;font-family: 'Microsoft Yahei UI Light';">
                        ({{i[3]}}分) {{i[2]|safe}}
                        <textarea style="height: 200px;width:100%;max-width:100%;resize:vertical;font-family: 'Microsoft Yahei UI';font-size:15px;" name="{{i[0]}}" placeholder="填空题有多个答案的，每个答案单独占一行">{{i[4]}}</textarea>
                    </div>
                </div>
                {% endfor %}
                <button id="management" style="height: 35px;" type="submit" >提交</button><button id="save" style="height: 35px; " type="submit" formtarget="saver" formaction="/save/{{testname}}">保存</button><iframe name="saver" id="saver" scrolling="no" style="position: fixed;height: 40px;width: 200px; left:700px;top:10px;border:none;"></iframe>
                <div style="position:fixed;top:10px;height:35px;left:360px;background-color:#09F;border: #09F;border-width: thin;border-radius: 5px;animation:time {{timeout}}s linear;"></div>
                <div style="position:fixed;top:10px;height:29px;width:300px;left:360px;color:black;border: #09F;border-width: thin;border-radius: 6px;border-style:solid;font-size:18px;text-align: center;padding-top:5px;">剩余时间：<span id="timeshow">{{timeout}}</span>秒</div>
            </form>
        </div>
        <script>
            $(document).on("click","button",function(){
                su=this;
                if($(su).html()=="保存"){
                    document.getElementById("saver").contentWindow.document.getElementsByTagName("body")[0].innerHTML="正在保存……";
                }
                else if($(su).html()=="提交"){
                    $("#cover").css("display","block");
                    $("#info").css("display","block");
                    $.post("/getwaitin","",function(data,status){
                            $("#waitinline").html(data);
                        })
                    setInterval(function(){
                        $.post("/getwaitin","",function(data,status){
                            $("#waitinline").html(data);
                        })
                    },60000)
                }
            })
            setTimeout("document.getElementById(\"o(*￣▽￣*)ブ\").submit()",{{timeout}}*1000);
            setInterval("document.getElementById(\"timeshow\").innerHTML=String(Number(document.getElementById(\"timeshow\").innerHTML)-1)",1000)
            setInterval(function(){
                document.getElementById("save").click()
            },300000);
            i=0;
            setInterval(function(){
                info=document.getElementById("saver").contentWindow.document.getElementsByTagName("body")[0].innerHTML;
                if(info=="保存成功"){i=0;};
                if(document.getElementById("saver").contentWindow.document.getElementsByTagName("body")[0].innerHTML!="保存失败"){
                document.getElementById("saver").contentWindow.document.getElementsByTagName("body")[0].innerHTML="距离上次保存"+i+"秒";
                i=i+1;
                };
                
            },1000);
            setInterval(function(){
                $.post("/istestongoing","testname={{testname}}",function(data,status){
                    if (data==0){
                        window.location.href="/result/{{testname}}";}
                });
            },120000);
        </script>
    </body>

        
</html> 